/*
 * @Author: xuchao 
 * @Date: 2018-06-05 17:02:22 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-25 17:17:23
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Info extends Component {
    constructor(props){
        super(props)
        this.state = {
            tabs: [{
                name: '事件通报',
                class: 'sjtb',
                list: [{
                    name: '2018年6月份电子政务信息安全风险整改通知',
                    time: '2018-06-08 09:04:21'
                }, {
                    name: '2018年2季度信息安全防护水平上升前十名单位表彰通知'
                }, {
                    name: '2018年2季度信息安全综合水平后十名单位通报通知'
                }, {
                    name: '2018年2季度完成风险评估单位名单'
                }, {
                    name: '2017年漏评漏测单位名单'
                }]
            }, {
                name: '漏洞警报',
                class: 'ldjb',
                list: [{
                    name: 'Apache Batik信息泄露漏洞（CNVD-2018-10557）',
                    time: '2018-04-18 09:04:21'
                }, {
                    name: '多个TIBCO产品信息泄露漏洞（CNVD-2018-10558）'
                }, {
                    name: 'wpForo SQL注入漏洞'
                }, {
                    name: 'IBM Storwize V7000 Unified信息泄露漏洞（CNVD-2018-10565）'
                }, {
                    name: 'IBM DB2 for Linux、UNIX和Windows文件覆盖漏洞（CNVD-2018-10562）'
                }]
            }, {
                name: '安全新闻',
                class: 'aqxw',
                list: [{
                    name: '我市科技学院代表队在江苏省信息安全技能大赛荣获1等奖',
                    time: '2018-04-18 09:16:21'
                }, {
                    name: '省委省政府领导来我市参观考察信息安全作战指挥中心'
                }, {
                    name: '2018年全市信息安全年度大会成功举行'
                }, {
                    name: '我市网信办信息安全作战指挥中心荣获省创新奖'
                }, {
                    name: '市委宣传部、网信办组织编写《市民信息安全手册》'
                }]
            }],
            currentIndex: 0
        }
    }

    tabToggle(index){
        this.setState({
            currentIndex: index
        })
    }    

    render(){
        const { tabs, currentIndex } = this.state;
        return(
            <div className="aqzx">
                <div className="center">
                    <p>安全资讯</p>
                    <div className="border" />
                    <ul>
                        {
                            tabs && tabs.map((item, index) => {
                                return(
                                    <li className={currentIndex===index ? 'active' : ''} onClick={this.tabToggle.bind(this, index)} key={index}>
                                        <i className={item.class}></i>
                                        {item.name}
                                        <span className={currentIndex===index ? 'show' : 'hide'}></span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="toggle bg">
                    <div className="center">
                        <div className="left">
                            <div className="img">
                                <img src="http://cms-bucket.nosdn.127.net/2018/06/04/8839f1758b714c0fbd61e7cebb49ca9e.jpeg?imageView&thumbnail=550x0" alt=""/>
                                <div className="time">
                                    <i></i>
                                    {tabs[currentIndex].list[0].time}
                                </div>
                            </div>
                            <p className="title">{tabs[currentIndex].list[0].name}</p>
                            <p className="content">{tabs[currentIndex].list[0].name}</p>
                            <a href="">查看详情</a>
                        </div>
                        <div className="right">
                            <ul>
                                {
                                    tabs[currentIndex].list.map((item, index) => {
                                        return (
                                            <li key={index}>
                                                <Link to="">
                                                    <em>0{index+1}</em>
                                                    <div className="info">
                                                        <h1>{item.name}</h1>
                                                        <p>{item.name}</p>
                                                    </div>
                                                </Link>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}